<template>
    <div class="article-navigation" v-if="!loading && (previousArticle || nextArticle)">
        <div class="nav-item previous" :class="{ 'no-article': !previousArticle }">
            <router-link v-if="previousArticle" :to="`/post/${previousArticle.id}`" class="nav-link">
                <div class="nav-arrow">
                    <i class="fas fa-arrow-left"></i>
                    <span>上一篇</span>
                </div>
                <el-tooltip :content="previousArticle.title" placement="top" effect="light">
                    <div class="nav-title">{{ previousArticle.title }}</div>
                </el-tooltip>
            </router-link>
            <div v-else class="nav-link">
                <div class="nav-arrow">
                    <i class="fas fa-arrow-left"></i>
                    <span>上一篇</span>
                </div>
                <div class="nav-title">没有更多文章了</div>
            </div>
        </div>
        <div class="nav-divider"></div>
        <div class="nav-item next" :class="{ 'no-article': !nextArticle }">
            <router-link v-if="nextArticle" :to="`/post/${nextArticle.id}`" class="nav-link">
                <el-tooltip :content="nextArticle.title" placement="top" effect="light">
                    <div class="nav-title">{{ nextArticle.title }}</div>
                </el-tooltip>
                <div class="nav-arrow">
                    <span>下一篇</span>
                    <i class="fas fa-arrow-right"></i>
                </div>
            </router-link>
            <div v-else class="nav-link">
                <div class="nav-title">没有更多文章了</div>
                <div class="nav-arrow">
                    <span>下一篇</span>
                    <i class="fas fa-arrow-right"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getArticleNavigationApi } from '@/api/article';

export default {
    name: 'ArticleNavigation',
    props: {
        articleId: {
            type: [Number, String],
            required: true
        }
    },
    data() {
        return {
            loading: true,
            previousArticle: null,
            nextArticle: null
        };
    },
    watch: {
        articleId: {
            immediate: true,
            handler(id) {
                if (id) {
                    this.fetchNavigation();
                }
            }
        }
    },
    methods: {
        async fetchNavigation() {
            this.loading = true;
            try {
                const res = await getArticleNavigationApi(this.articleId);
                if (res.data) {
                    this.previousArticle = res.data.previous || null;
                    this.nextArticle = res.data.next || null;
                }
            } catch (error) {
                console.error('获取文章导航失败:', error);
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.article-navigation {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    padding: 20px;
    border-radius: 12px;
    background: var(--card-bg, #fff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    gap: 20px;

    &:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary, #409EFF) 0%, rgba(64, 158, 255, 0.6) 100%);
    }

    .nav-divider {
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--border-color, #eaeaea), transparent);
        margin: 0 10px;
    }

    .nav-item {
        width: 48%;
        transition: all 0.3s ease;

        .nav-link {
            display: flex;
            align-items: center;
            padding: 12px;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid transparent;

            &:hover {
                background-color: var(--hover-bg, rgba(64, 158, 255, 0.05));
                border-color: var(--border-color, #eaeaea);
            }
        }

        .nav-arrow {
            display: flex;
            align-items: center;
            color: var(--text-secondary, #909399);
            font-size: 14px;
            flex-shrink: 0;
            font-weight: 500;

            span {
                margin: 0 6px;
            }

            i {
                transition: all 0.3s ease;
                background: var(--hover-bg, rgba(0, 0, 0, 0.03));
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            }
        }

        .nav-title {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-primary, #333);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all 0.3s ease;
            position: relative;
            max-width: 200px;

            &::after {
                content: '';
                position: absolute;
                bottom: -3px;
                left: 0;
                width: 0;
                height: 2px;
                background-color: var(--primary, #409EFF);
                transition: width 0.3s ease;
                border-radius: 1px;
            }
        }

        &.previous {
            .nav-link {
                justify-content: flex-start;
            }

            .nav-title {
                margin-left: 12px;
                text-align: left;
            }

            &:hover .nav-arrow i {
                color: var(--primary, #409EFF);
                transform: translateX(-3px);
                background: rgba(64, 158, 255, 0.1);
                box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
            }
        }

        &.next {
            .nav-link {
                justify-content: flex-end;
            }

            .nav-title {
                margin-right: 12px;
                text-align: right;

                &::after {
                    right: 0;
                    left: auto;
                }
            }

            &:hover .nav-arrow i {
                color: var(--primary, #409EFF);
                transform: translateX(3px);
                background: rgba(64, 158, 255, 0.1);
                box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
            }
        }

        &:hover .nav-title {
            color: var(--primary, #409EFF);

            &::after {
                width: 100%;
            }
        }

        &.no-article {
            .nav-link {
                cursor: not-allowed;
                opacity: 0.8;

                &:hover {
                    background-color: transparent;
                    border-color: transparent;
                }
            }

            .nav-title {
                color: var(--text-placeholder, #c0c4cc);
            }

            &:hover .nav-title::after {
                width: 0;
            }

            &:hover .nav-arrow i {
                transform: none;
                background: var(--hover-bg, rgba(0, 0, 0, 0.03));
                color: var(--text-secondary, #909399);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            }
        }
    }

    @media (max-width: 768px) {
        flex-direction: column;
        gap: 15px;

        .nav-item {
            width: 100%;

            .nav-title {
                max-width: 70%;
            }
        }

        .nav-divider {
            width: 100%;
            height: 1px;
            margin: 5px 0;
            background: linear-gradient(to right, transparent, var(--border-color, #eaeaea), transparent);
        }
    }
}

/* 暗黑模式样式 */
@media (prefers-color-scheme: dark) {
    .article-navigation {
        background: #1f1f1f;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

        &::before {
            background: linear-gradient(90deg, #409EFF 0%, rgba(64, 158, 255, 0.4) 100%);
        }

        .nav-divider {
            background: linear-gradient(to bottom, transparent, #333, transparent);
        }

        .nav-item {
            .nav-link:hover {
                background-color: rgba(64, 158, 255, 0.08);
                border-color: #333;
            }

            .nav-arrow {
                color: #8a8a8a;

                i {
                    background: rgba(255, 255, 255, 0.05);
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
                }
            }

            .nav-title {
                color: #e0e0e0;
            }

            &.no-article .nav-title {
                color: #7d7d7d;
            }

            &.previous,
            &.next {
                &:hover .nav-arrow i {
                    color: #409EFF;
                    background: rgba(64, 158, 255, 0.15);
                    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
                }
            }
        }

        @media (max-width: 768px) {
            .nav-divider {
                background: linear-gradient(to right, transparent, #333, transparent);
            }
        }
    }
}

/* 兼容自定义暗黑模式类 */
.dark-mode .article-navigation,
html.dark .article-navigation,
body.dark .article-navigation {
    background: #1f1f1f;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    &::before {
        background: linear-gradient(90deg, #409EFF 0%, rgba(64, 158, 255, 0.4) 100%);
    }

    .nav-divider {
        background: linear-gradient(to bottom, transparent, #333, transparent);
    }

    .nav-item {
        .nav-link:hover {
            background-color: rgba(64, 158, 255, 0.08);
            border-color: #333;
        }

        .nav-arrow {
            color: #8a8a8a;

            i {
                background: rgba(255, 255, 255, 0.05);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            }
        }

        .nav-title {
            color: #e0e0e0;
        }

        &.no-article .nav-title {
            color: #7d7d7d;
        }

        &.previous,
        &.next {
            &:hover .nav-arrow i {
                color: #409EFF;
                background: rgba(64, 158, 255, 0.15);
                box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
            }
        }
    }

    @media (max-width: 768px) {
        .nav-divider {
            background: linear-gradient(to right, transparent, #333, transparent);
        }
    }
}
</style>